﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>用户管理</title>
    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="../../assets/css/elementui.css">
    <link rel="stylesheet" type="text/css" href="/assets/libs/kindeditor/themes/default/default.css"/>

    <style>
        .el-card {
            margin-top: 4px
        }

        .el-dialog {
            margin-top: 1vh !important;
        }
    </style>
</head>
<body>
<!-- 正文开始 -->
<div id="app">
    <div>
        <el-card>
            <el-form :inline="true" :model="searchForm">
                <el-form-item>
                    <el-input placeholder="姓名" v-model="searchForm.name"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input placeholder="材料名称" v-model="searchForm.materialname"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-date-picker
                            v-model="searchForm.date"
                            value-format="yyyy-MM-dd"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-select placeholder="剩余时间" v-model="searchForm.delaydate">
                        <el-option v-for="(item,i) in delaydateOption" :key="i" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button @click="search" type="primary">查询</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <el-card>
            <el-row>
                <el-button @click="handleAdd">新增</el-button>
            </el-row>
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="name"
                        width="100"
                        label="姓名">
                </el-table-column>
                <el-table-column
                        prop="account"
                        width="100"
                        label="工号">
                </el-table-column>
                <el-table-column
                        prop="materialname"
                        width="180"
                        label="材料名称">
                </el-table-column>
                <el-table-column
                        prop="noticeresult"
                        width="180"
                        label="通知状态">
                    <template slot-scope="scope">
                        {{scope.row.noticeresult=='-1'?'通知失败':(scope.row.noticeresult=='1'?'已通知':'未通知')}}<br>
                        {{scope.row.noticetime}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="crttime"
                        label="创建时间"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="finishtime"
                        label="结束时间"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="delaydate"
                        label="剩余时间"
                        width="180">
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="100">
                    <template slot-scope="scope">
                        <el-button v-if="!scope.row.finishtime" @click="finish(scope.row)" type="text" size="small">结束
                        </el-button>
                        <el-button v-if="!scope.row.finishtime" @click="notice(scope.row)" type="text" size="small">通知
                        </el-button>
                        <el-button v-if="scope.row.finishtime" @click="copy(scope.row)" type="text" size="small">复制任务
                        </el-button>
                        <el-button v-if="scope.row.finishtime" @click="remove(scope.row)" type="text" size="small">删除
                        </el-button>
                        <el-button v-if="!scope.row.finishtime" @click="handleUpdate(scope.row)" type="text"
                                   size="small">修改
                        </el-button>
                    </template>
                </el-table-column>

            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="page.currentPage"
                    :page-size="page.rows"
                    layout="total, sizes, prev, pager, next"
                    :page-sizes="[10, 20, 50]"
                    :total="page.total">
            </el-pagination>
        </el-card>
        <el-dialog :visible.sync="addEditDialog">
            <el-form label-width="8em" :model="formItem" :rules="rules" ref="formItem">
                <el-form-item label="材料名称" prop="materialname">
                    <el-select v-model="formItem.materialname" filterable>
                        <el-option v-for="(item,i) in materialOption"
                                   :key="i"
                                   :label="item.label"
                                   :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="formItem.name" @input="getUserAccount"></el-input>
                </el-form-item>
                <el-form-item label="工号" prop="account">
                    <el-input v-model="formItem.account"></el-input>
                </el-form-item>
                <el-form-item label="剩余通知时间" prop="delaydate">
                    <el-input v-model="formItem.delaydate"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSubmit">保存</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</div>
<script type="text/javascript" src="../../../assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="../../../assets/js/common.js?v=317"></script>
<script type="text/javascript" src="../../../assets/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../../../assets/js/js.cookie.min.js"></script>
<script type="text/javascript" src="../../../assets/js/sqjx.js"></script>
<script type="text/javascript" src="../../../assets/js/custom.js"></script>
<script charset="utf-8" src="/assets/libs/kindeditor/kindeditor.js"></script>
<script charset="utf-8" src="/assets/libs/kindeditor/plugins/code/prettify.js"></script>
<script src="../../../assets/js/vue.min.js"></script>
<script src="../../../assets/js/elementui.js"></script>
<script>
    let that;
    new Vue({
        el: '#app',
        data: function () {
            return {
                addEditDialog: false,
                searchForm: {
                    name: '',
                    materialname: '',
                    date: '',
                    delaydate: '0',
                },
                materialOption: [],
                delaydateOption: [{label: '全部', value: ''}, {label: '今日到期', value: '0'}, {
                    label: '1天',
                    value: '1'
                }, {label: '2天', value: '2'}],
                formItem: {
                    id: '',
                    account: '',
                    name: '',
                    materialname: '',
                    delaydate: 30,
                },
                page: {
                    total: 0,
                    currentPage: 1,
                    rows: 10,
                },
                apiList: [],
                noticeTypeList: noticeTypeList,
                tableData: [],
                rules: {
                    name: [
                        {required: true, message: '请输入姓名', trigger: 'blur'},
                    ],
                    account: [
                        {required: true, message: '请输入工号', trigger: 'change'}
                    ],
                    materialname: [
                        {required: true, message: '请选择材料名称', trigger: 'change'}
                    ],
                    delaydate: [
                        {required: true, message: '请选择时间', trigger: 'change'}
                    ],
                }
            }
        },

        methods: {
            handleAdd(row) {
                that.addEditDialog = true;
                //手动添加任务
            },
            handleSubmit() {
                that.$confirm(that.formItem.id ? '确认修改？' : '确认添加？', '提示').then(res => {
                    that.addUpdate();
                })

            },
            getUserAccount() {
                $.get('/office/user/getUserInfo', {trueName: that.formItem.name}, function (res) {
                    if (res.code == 200) {
                        that.formItem.account = res.obj.account;
                    }
                })
            },
            addUpdate() {
                that.$refs['formItem'].validate(valid => {
                    if (valid) {
                        doPostAsync(!that.formItem.id ? '/office/taskNotice/add' : '/office/taskNotice/update', that.formItem, function (res) {
                            that.addEditDialog = false;
                            if (res.code === 0) {
                                that.search();
                                that.$message.success(res.msg);
                            } else {
                                that.$message.warning(res.msg);

                            }
                        })
                    }
                })
            },
            notice(row) {
                $.post('/office/taskNotice/notice?mask=true', {id: row.id}, function (res) {
                    if (res.code === 0) {
                        that.search();
                        that.$message.success(res.msg);
                    } else {
                        that.$message.warning(res.msg);

                    }
                })
            },
            handleUpdate(row) {
                that.addEditDialog = true;
                that.formItem = row;
            },
            copy(row) {
                that.$confirm('确认复制？').then(() => {
                    let param = JSON.parse(JSON.stringify(row));
                    param.id = '';
                    param.finishtime = '';
                    param.delaydate = 30;
                    doPostAsync('/office/taskNotice/add', param, function (res) {
                        if (res.code === 0) {
                            that.search();
                            that.$message.success(res.msg);
                        } else {
                            that.$message.warning(res.msg);

                        }
                    })
                })
            },
            remove(row) {
                that.$confirm('确认删除？').then(() => {
                    $.get('/office/taskNotice/remove', {id: row.id}, function (res) {
                        if (res.code === 0) {
                            that.search();
                            that.$message.success(res.msg);
                        } else {
                            that.$message.warning(res.msg);
                        }
                    })
                })
            },
            finish(row) {
                that.$confirm('是否结束任务?', '提示').then(() => {
                    $.post('/office/taskNotice/finish', {id: row.id}, function (res) {
                        if (res.code === 0) {
                            showAlert(res.msg, 1);
                            that.search()
                        } else {
                            showAlert(res.msg)
                        }
                    })
                })

            },
            search: function () {
                var params = JSON.parse(JSON.stringify(this.searchForm));
                params.startDate = params.date[0];
                params.endDate = params.date[1];
                params.page = this.page.currentPage;
                params.rows = this.page.rows;
                $.get('/office/taskNotice/queryTaskNoticeList', params, function (res) {
                    that.tableData = res.data.rows
                    that.page.total = res.data.total
                })
            },
            handleSizeChange() {

            },
            handleCurrentChange(currentPage) {
                that.page.currentPage = currentPage;
                that.search()
            },
            queryMaterial() {
                $.post('/office/tDict/queryChildrenDict', {pDictCode: 'dxscl'}, function (res) {
                    if (res.code == 200) {
                        that.materialOption = res.obj.map(item => {
                            return {label: item.dictValue, value: item.dictValue}
                        })
                    }

                })
            }
        },
        mounted: function () {
            that = this
            that.search();
            that.queryMaterial();
        },
        watch: {
            // 'formItem.name':function (e) {
            //     debugger
            //     $.get('/office/taskNotice/queryTaskNoticeList', {name:e,materialname:that.formItem.materialname}, function (res) {
            //         if(res.code===0){
            //             that.formItem=res.data.rows[0];
            //             that.formItem.delaydate=30;
            //         }
            //     })
            // },
        }
    })
</script>
</body>
</html>
